<template>
    <div class="community-management">
      <el-card class="community-card">
        <!-- 帖子列表 -->
        <el-table :data="posts" style="width: 100%">
          <el-table-column prop="id" label="Post ID" width="80"></el-table-column>
          <el-table-column prop="title" label="Title"></el-table-column>
          <el-table-column prop="author" label="Author"></el-table-column>
          <el-table-column prop="createdAt" label="Created At"></el-table-column>
          <el-table-column label="Actions" width="200">
            <template #default="{ row }">
              <el-button type="link" @click="viewPost(row.id)">View</el-button>
              <el-button type="link" @click="editPost(row.id)">Edit</el-button>
              <el-button type="link" @click="deletePost(row.id)">Delete</el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <!-- 分页组件 -->
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          @current-change="handlePageChange"
          class="pagination"
        ></el-pagination>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { ElCard, ElTable, ElTableColumn, ElButton, ElPagination } from 'element-plus';
  
  // 假设的帖子数据
  const posts = ref([
    // 填充帖子数据
  ]);
  
  // 分页相关数据
  const total = ref(0);
  const pageSize = ref(10);
  const currentPage = ref(1);
  
  // 获取帖子列表
  const fetchPosts = () => {
    // 模拟API请求获取帖子列表
    posts.value = [
      // 填充帖子列表数据
    ];
    total.value = posts.value.length;
  };
  
  // 查看帖子详情
  const viewPost = (id) => {
    // 执行查看帖子详情的逻辑
  };
  
  // 编辑帖子
  const editPost = (id) => {
    // 执行编辑帖子的逻辑
  };
  
  // 删除帖子
  const deletePost = (id) => {
    // 执行删除帖子的逻辑
  };
  
  // 分页切换
  const handlePageChange = (newPage) => {
    currentPage.value = newPage;
    fetchPosts();
  };
  
  onMounted(() => {
    fetchPosts();
  });
  </script>
  
  <style scoped>
  .community-management {
    padding: 20px;
    background-color: #f5f5f5;
  }
  
  .community-card {
    margin: auto;
    max-width: 1200px;
  }
  
  .pagination {
    margin-top: 20px;
    text-align: center;
  }
  
  /* 其他样式可以根据需要添加 */
  </style>